import { SmartForm } from 'comps/common';
import { Button, Form, Input, Radio, Modal, Upload, Icon } from 'antd';
import * as React from 'react';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class CompanyForm extends React.Component {
  constructor(props) {
    super(props);
    let logoFileList;
    if (props.company.logo) {
      logoFileList = [{
        uid: -1,
        thumbUrl: props.company.logo
      }];
    } else {
      logoFileList = [];
    }
    this.state = {
      logoFileList
    };
  }

  doSubmit(evt) {
    evt.preventDefault();
    this.props.smartSubmit(values => {
      if (values.id === undefined) {
        return this.props.onCompanyInsert(values);
      }
      return this.props.onCompanyUpdate(values);
    });
  }

  render() {
    const { getFieldProps, setFieldsValue } = this.props.form;
    const uploadProps = {
      action: '/api/images/upload',
      listType: 'picture-card',
      onChange: (info) => {
        if (!info.file.response) {
          return;
        }
        this.setState({ logoFileList: info.fileList.slice(-1) });
        setFieldsValue({ logo: info.file.response.url });
      }
    };

    const nameProps = this.props.form.getFieldProps('name', {
      rules: [
        { required: true, message: '请填写公司名称' }
      ]
    });

    return (
      <Form horizontal onSubmit={::this.doSubmit} form={this.props.form}>
        <Input type='hidden' {...getFieldProps('id')}/>
        <FormItem label='名称' required>
          <Input type='text' {...nameProps}/>
        </FormItem>
        <FormItem label='Logo'>
          <Input type='hidden' {...getFieldProps('logo')}/>
          <Upload {...uploadProps} fileList={this.state.logoFileList}>
            <Icon type='plus'/>
            <div className='ant-upload-text'>上传图片</div>
          </Upload>
        </FormItem>
        <FormItem label='类型' required>
          <RadioGroup {...getFieldProps('type', { initialValue: 'CUSTOMER' })}>
            <Radio value='CUSTOMER'>客户企业</Radio>
            <Radio value='ISV'>ISV</Radio>
            <Radio value='BOTH'>客户企业 & ISV</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label='描述'>
          <Input type='textarea' rows='5' {...getFieldProps('desc')}/>
        </FormItem>
        <Button htmlType='submit' type='primary' loading={this.props.submiting}>提交</Button>
      </Form>
    );
  }
}
CompanyForm = Form.create()(SmartForm.beSmart()(CompanyForm));

export default CompanyForm;
